﻿<template id="@(ViewBag.GetCompTemplate("assign"))">
    <el-dialog v-model="visible" :width="1860" :title="title" :destroy-on-close="true" :close-on-click-modal="false" :close-on-press-escape="false" draggable v-on:close="closed">
        <el-divider class="layout-page-form-top-border"></el-divider>
        <el-row :gutter="12">
            <el-col :span="9">
                <single_table :api="`${path}/getfunction`" :height="height" :border="true" row-key="Id" ref="fRef" :hide-column-filter="true">
                    <template #header-left="scope">
                        <el-button type="primary" v-on:click="addAll">添加全部</el-button>
                        <el-button type="primary" plain :disabled="!scope.isSelected" v-on:click="addList(scope.selectedList)">添加选中</el-button>
                    </template>
                    <template #default>
                        <el-table-column type="selection" fixed="left" width="50" align="center"></el-table-column>
                        <el-table-column prop="Title" label="功能名称" align="center">
                            <template #default="scope">
                                <span class="icon_and_text">
                                    <el-icon><component :is="scope.row.Icon"></component></el-icon>
                                    <span>{{scope.row.Title}}</span>
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="类型" align="center">
                            <template #default="scope">
                                <el-tag v-if="scope.row.Type=='power'" type="success">可视权限</el-tag>
                                <el-tag v-else-if="scope.row.Type=='tools'" type="warning">功能按钮</el-tag>
                                <el-tag v-else-if="scope.row.Type=='table'">表格按钮</el-tag>
                                <el-tag v-else type="info">其他</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="Value" label="功能键值" width="250"></el-table-column>
                        <single_table_operation count="1">
                            <template #default="scope">
                                <el-button type="primary" icon="Plus" link v-on:click="addList([scope.row])">添加</el-button>
                            </template>
                        </single_table_operation>
                    </template>
                </single_table>
            </el-col>
            <el-col :span="15">
                <single_table :api="`${path}/getfunctionbymenuid`" :base-query="{id}" :height="height" :border="true" row-key="Id" ref="mfRef" :cell-class-name="editClass" v-on:row-click="rowClick" :hide-header-right="true">
                    <template #header-left="scope">
                        <el-button type="danger" v-on:click="delAll">删除全部</el-button>
                        <el-button type="danger" plain :disabled="!scope.isSelected" v-on:click="delList(scope.selectedListIds)">删除选中</el-button>
                    </template>
                    <template #header-right="scope">
                        <span class="page-table-header-right-span" v-if="src">路径: {{src}}</span>
                        <span class="page-table-header-right-span">已选: {{scope.dataList.length}} 项</span>
                    </template>
                    <template #default>
                        <el-table-column type="selection" fixed="left" width="50" align="center"></el-table-column>
                        <single_table_editor prop="Title" label="功能名称" fixed="left" width="125" align="center">
                            <template #default="scope">
                                <el-input v-model="scope.row.Title"></el-input>
                            </template>
                        </single_table_editor>
                        <single_table_editor prop="Icon" label="功能图标" width="150" align="center">
                            <template #default="scope">
                                <single_icon_select v-model="scope.row.Icon"></single_icon_select>
                            </template>
                            <template #text="scope">
                                <el-icon><component :is="scope.row.Icon"></component></el-icon>
                            </template>
                        </single_table_editor>
                        <single_table_editor prop="Type" label="类型" width="125" align="center">
                            <template #default="scope">
                                <el-select v-model="scope.row.Type">
                                    <el-option value="power" label="可视权限"></el-option>
                                    <el-option value="tools" label="功能按钮"></el-option>
                                    <el-option value="table" label="表格按钮"></el-option>
                                </el-select>
                            </template>
                            <template #text="scope">
                                <el-tag v-if="scope.row.Type=='power'" type="success">可视权限</el-tag>
                                <el-tag v-else-if="scope.row.Type=='tools'" type="warning">功能按钮</el-tag>
                                <el-tag v-else-if="scope.row.Type=='table'">表格按钮</el-tag>
                                <el-tag v-else type="info">其他</el-tag>
                            </template>
                        </single_table_editor>
                        <single_table_editor prop="Value" label="功能键值" width="250">
                            <template #default="scope">
                                <el-input v-model="scope.row.Value"></el-input>
                            </template>
                        </single_table_editor>
                        <single_table_editor prop="Attrs" label="其他属性" width="400">
                            <template #default="scope">
                                <el-input v-model="scope.row.Attrs"></el-input>
                            </template>
                        </single_table_editor>
                        <single_table_editor prop="Path" label="权限路径" width="300">
                            <template #default="scope">
                                <el-input v-model="scope.row.Path"></el-input>
                            </template>
                        </single_table_editor>
                        <single_table_operation count="3">
                            <template #default="scope">
                                <el-button type="primary" icon="Top" link v-on:click="toUp(scope.$index)">上移</el-button>
                                <el-button type="primary" icon="Bottom" link v-on:click="toDown(scope.$index)">下移</el-button>
                                <el-button type="danger" icon="Delete" link v-on:click="delList([scope.row.Id])">删除</el-button>
                            </template>
                        </single_table_operation>
                    </template>
                </single_table>
            </el-col>
        </el-row>
        <template #footer>
            <el-button v-on:click="close">取消</el-button>
            <el-button type="primary" v-on:click="submit">确定</el-button>
        </template>
    </el-dialog>
</template>
<script type="text/javascript">
    var @(ViewBag.GetCompName("assign")) = {
        template: "#@(ViewBag.GetCompTemplate("assign"))", data() {
            return {
                path: "@(ViewBag.PagePath)",
                visible: false,
                title: null,
                id: null,
                src: null,
                rules: {
                    Title: [{ required: true, message: "请输入功能名称" }],
                    Icon: [{ required: true, message: "请选择功能图标" }],
                    Value: [{ required: true, message: "请输入功能键值" }]
                },
                tempId: 1,
                height: 495
            }
        },
        methods: {
            open(row){
                var that = this;
                that.id = row.Id;
                that.title = `配置功能（${row.Title}）`;
                that.src = row.Src;
                that.visible = true;
            },
            close(){
                this.visible = false;
            },
            closed(){
                this.id = null;
                this.title = null;
                this.src = null;
            },
            rowClick(row, col){
                if (col && col.property) { row.isEdit = true; }
            },
            editClass(scope){
                return app.func.tableRowEditCellVerify(scope, this.rules) ? null : "edit_row_error";
            },
            submit(){
                var that = this;
                var rows = that.$refs.mfRef.processTableData;
                for (var i = 0; i < rows.length; i++) {
                    if (!app.func.tableRowEditVerify(rows[i], this.rules)) { return; }
                }
                app.func.submit(`${that.path}/assign`, { menuId: that.id, rows }, that.close);

            },
            addAll(){
                var that = this;
                var rows = that.$refs.fRef.processTableData;
                that.addList(rows);
            },
            addList(rows){
                var that = this;
                var existRows = that.$refs.mfRef.processTableData;
                rows.forEach(m => {
                    existRows.push({
                        Id: that.tempId++,
                        MenuId: that.id,
                        Title: m.Title,
                        Icon: m.Icon,
                        Type: m.Type,
                        Value: m.Value,
                        Attrs: m.Attrs
                    });
                });
            },
            delAll(){
                this.$refs.mfRef.processTableData = [];
            },
            delList(ids){
                this.$refs.mfRef.processTableData = this.$refs.mfRef.processTableData.filter(m => ids.indexOf(m.Id) == -1);
            },
            toUp(index){
                var that = this;
                if (index > 0) {
                    var temp = that.$refs.mfRef.processTableData[index - 1];
                    that.$refs.mfRef.processTableData[index - 1] = that.$refs.mfRef.processTableData[index];
                    that.$refs.mfRef.processTableData[index] = temp;
                }
            },
            toDown(index){
                var that = this;
                if (index < that.$refs.mfRef.processTableData.length - 1) {
                    var temp = that.$refs.mfRef.processTableData[index + 1];
                    that.$refs.mfRef.processTableData[index + 1] = that.$refs.mfRef.processTableData[index];
                    that.$refs.mfRef.processTableData[index] = temp;
                }
            }
        },
        mounted() { }
    };
</script>